<template>
	<view class="h100 column">
		<view class="ptb20">
			<u-tabs :list="tabs" :current="current" lineWidth="40rpx" lineHeight="3rpx" lineColor="#0759BB" keyName="label"
				:scrollable="false" :activeStyle="{
					color: '#0759BB',
					fontWeight: 'bold',
					fontSize: '30rpx',
					transform: 'scale(1.05)'
				}" :inactiveStyle="{
					color: '#000000',
					fontSize: '28rpx',
					transform: 'scale(1)'
				}" itemStyle="height: 34px;" @change="e => current=e.index"></u-tabs>
		</view>
		<swiper :indicator-dots="false" :current="current" :autoplay="false" class="flex-1 hidden" @change="onSwiperChange">
			<swiper-item>
				<view class="w100 bgf ptb37 plr44">
					<custom-upload :imageBoxStyle="{
							borderRadius: '20rpx',
							background: '#F4F5F9',
							width: '662rpx',
							height: '285rpx',
							border: 'none'
						}" v-model="form.imgs">
						<template #upload-image>
							<view class="justify-start align-center">
								<u-icon name="plus" color="#999999" bold size="30rpx"></u-icon>
								<view class="color9 fs30 mb5 ml6">请上传完整清晰的行驶证</view>
							</view>
						</template>
					</custom-upload>
				</view>
				<view class="w-calc-35" style="margin-top: 444rpx;">
					<view class="">
						<text class="color0 fs28">查询费用</text>
						<text class="fs30 bold" style="color: #ff0000">￥15.00</text>
					</view>
					<view class="justify-start align-center">
						<u-checkbox :customStyle="{ marginBottom: '8px' }" name="agree" usedAlone shape="circle" iconSize="30rpx"
							v-model:checked="agree"></u-checkbox>
						<text class="color0 fs28 mb10">已阅读并同意《用户服务协议》</text>
					</view>
					<view class="mt33">
						<u-button type="primary" :customStyle="{ borderRadius: '15rpx', height: '80rpx' }">查询</u-button>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="h100 bgf plr30 pt34">
					<u-search v-model="queryParams.keywords" :showAction="false" height="73rpx" placeholder="模柌搜索车架号"
						shape="square" bgColor="#F2F2F2" :customStyle="{borderRadius: '20rpx', overflow: 'hidden'}"></u-search>
					<scroll-view scroll-y="true" class="mt43">
						<view class="record">
							<view class="">
								<view class="num">车架号:12163414414242</view>
								<view class="time">2025-05-12 21:12:56</view>
							</view>
							<view class="but center">查看结果</view>
						</view>
					</scroll-view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const form = ref({
		imgs: ''
	});

	const queryParams = ref({
		keywords: ''
	})

	const agree = ref(false)

	/* tab相关 */
	const current = ref(0)
	const tabs = [{
			label: '下单查询',
			value: 'query'
		},
		{
			label: '历史记录',
			value: 'record'
		}
	];

	function onSwiperChange(e) {
		console.log("e", e)
	}
</script>

<style scoped lang="scss">
	.record {
		width: 100%;
		height: 152rpx;
		background: #F2F2F2;
		border-radius: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 25rpx 24rpx 36rpx;
		box-sizing: border-box;

		.num {
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
		}

		.time {
			font-weight: 400;
			font-size: 26rpx;
			color: #606060;
			margin-top: 14rpx;
		}

		.but {
			width: 170rpx;
			height: 70rpx;
			background: #0759BB;
			border-radius: 15rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
</style>